<template>
	<view>
		<!-- 商品组 -->
		<view class="diy-goods" :style="{background: itemStyle.background }">
		  <view :class="['goods-list','display__'+itemStyle.display,'column__'+itemStyle.column]">
		    <scroll-view :scroll-x="itemStyle.display === 'slide'">
		      <view class="goods-item" v-for="(dataItem,index) in dataList" :key="index">
		        <form @submit="_onTargetGoods" report-submit="true">
		          <button formType="submit" class="btn-normal" :data-id="dataItem.goods_id">
		            <!-- 单列商品 -->
		            <block v-if="itemStyle.column == 1">
		              <view class="preSale" v-if="dataItem.is_activity==10">预售</view>
		              <view class="dis-flex">
		                <!-- 商品图片 -->
		                <view class="goods-item_left">
		                  <image class="image" :src="dataItem.image" lazy-load></image>
		                  <!-- <img-default mode="scaleToFill" :originalImage="dataItem.image"></img-default> -->
		                </view>
		                <view class="goods-item_right">
		                  <!-- 商品名称 -->
		                  <view v-if="itemStyle.show.goodsName" class="goods-item_title twolist-hidden">
		                  <text  v-if="dataItem.trade_type_name == '一般贸易'" class="generalTrade">{{dataItem.trade_type_name}}</text>
		                  <text  v-if="dataItem.trade_type_name == '直邮'" class="direct">{{dataItem.trade_type_name}}</text>
		                  <text  v-if="dataItem.trade_type_name == '保税'" class="bonded">{{dataItem.trade_type_name}}</text>
		                  <text  v-if="dataItem.trade_type_name == ''" class="autotrophy">自营</text>
		                    <text>{{ dataItem.goods_name }}</text>
		                  </view>
		                  <view class="goods-item_desc">
		                    <!-- 商品卖点 -->
		                    <view  v-if="itemStyle.show.sellingPoint" class="desc-selling_point dis-flex">
		                      <text class="onelist-hidden">{{ dataItem.selling_point }}</text>
		                    </view>
		                    <!-- 商品销量 -->
		                    <view  v-if="itemStyle.show.goodsSales" class="desc-goods_sales dis-flex">
		                      <text>已售{{ dataItem.goods_sales }}件</text>
		                    </view>
		                    <!-- 商品价格 -->
		                    <view class="desc_footer">
		                      <text  v-if="itemStyle.show.goodsPrice " class="price_x">¥{{ dataItem.goods_price }}</text>
		                      <!-- <text class="price_y col-9"  v-if="{{ itemStyle.show.linePrice && dataItem.line_price > 0 }}">¥{{ dataItem.line_price }}</text> -->
		                    </view>
		                  </view>
		                </view>
		              </view>
		            </block>
		            <!-- 多列商品 -->
		            <block v-else>
		              <view class="preSale"  v-if="dataItem.is_activity==10">预售</view>
		              <!-- 商品图片 -->
		              <view class="goods-image">
		                <image class="image" mode="aspectFill" lazy-load :src="dataItem.image"></image>
		                <!-- <img-default mode="scaleToFill" :originalImage="dataItem.image"></img-default> -->
		              </view>
		              <view class="detail">
		                <!-- 商品标题 -->
		                <view  v-if="itemStyle.show.goodsName " class="goods-name f-28 twolist-hidden">
		                  <text  v-if="dataItem.trade_type_name == '一般贸易'" class="generalTrade">{{dataItem.trade_type_name}}</text>
		                  <text  v-if="dataItem.trade_type_name == '直邮'" class="direct">{{dataItem.trade_type_name}}</text>
		                  <text  v-if="dataItem.trade_type_name == '保税'" class="bonded">{{dataItem.trade_type_name}}</text>
		                  <text  v-if="dataItem.trade_type_name == ''" class="autotrophy">自营</text>
		                  <text>{{ dataItem.goods_name }}</text>
		                </view>
		                <!-- 商品价格 -->
		                <view class="detail-price onelist-hidden">
		                  <text  v-if="itemStyle.show.goodsPrice" class="goods-price f-30 col-m">￥{{ dataItem.goods_price }}</text>
		                  <!-- <text  v-if="{{ itemStyle.show.linePrice && dataItem.line_price > 0 }}" class="line-price col-9 f-24">￥{{ dataItem.line_price }}</text> -->
		                </view>
		              </view>
		            </block>
		          </button>
		        </form>
		      </view>
		    </scroll-view>
		  </view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			itemIndex: String,
			itemStyle: Object,
			params: Object,
			dataList: Array
		},
		data() {
			return {
	
			};
		},
		created() {
		
		},
		methods: {
			/**
			 * 跳转到指定页面
			 */
			navigationTo: function(e) {
	
			},
			_onTargetGoods(e) {
			     
			}
		}
	}
</script>

<style scoped>
/* common.wxss */

/* @import "/utils/common.wxss"; */

/* 商品组 */
.preSale{
  position: absolute;
  left: 10rpx;
  top: 10rpx;
  color: black;
  z-index: 99;
  background-color: #e93e5d;
  border-radius: 20rpx;
  color: #fff;
  width: 80rpx;
  text-align: center;

}
.goods-item{
  position: relative;
}
.diy-goods .goods-list {
  padding: 4rpx;
  box-sizing: border-box;
}

.diy-goods .goods-list .goods-item {
  box-sizing: border-box;
  padding: 6rpx;
}

.diy-goods .goods-list.display__slide {
  white-space: nowrap;
  font-size: 0;
}

.diy-goods .goods-list.display__slide .goods-item {
  display: inline-block;
}

.diy-goods .goods-list.display__list .goods-item {
  float: left;
}

.diy-goods .goods-list.column__2 .goods-item {
  width: 50%;
}

.diy-goods .goods-list.column__3 .goods-item {
  width: 33.33333%;
}

.diy-goods .goods-list .goods-item .goods-image {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  overflow: hidden;
  background: #fff;
}

.diy-goods .goods-list .goods-item .goods-image:after {
  content: '';
  display: block;
  margin-top: 100%; /* margin 百分比相对父元素宽度计算 */
}

.diy-goods .goods-list .goods-item .goods-image image {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -o-object-fit: cover;
  object-fit: cover;
}

.diy-goods .goods-list .goods-item .detail {
  padding: 8rpx;
  background: #fff;
}

.diy-goods .goods-list .goods-item .detail .goods-name {
  height: 72rpx;
  line-height: 1.3;
  white-space: normal;
}
.diy-goods .goods-list .goods-item .detail .detail-price{
  text-align: left;
}
.diy-goods .goods-list .goods-item .detail .detail-price .goods-price {
  margin-right: 8rpx;
}

.diy-goods .goods-list .goods-item .detail .detail-price .line-price {
  text-decoration: line-through;
}

/* 单列商品 */

.diy-goods .goods-list.column__1 .goods-item {
  width: 100%;
  height: 280rpx;
  margin-bottom: 12rpx;
  padding: 20rpx;
  box-sizing: border-box;
  background: #fff;
}

.diy-goods .goods-list.column__1 .goods-item {
  line-height: 1.6;
}

.diy-goods .goods-list.column__1 .goods-item:last-child {
  margin-bottom: 0;
}

.diy-goods .goods-list.column__1 .goods-item_left {
  display: flex;
  width: 40%;
  background: #fff;
  align-items: center;
}

.diy-goods .goods-list.column__1 .goods-item_left image {
  display: block;
  width: 240rpx;
  height: 240rpx;
}

.diy-goods .goods-list.column__1 .goods-item_right {
  position: relative;
  width: 60%;
}

.diy-goods .goods-list.column__1 .goods-item_right .goods-item_title {
  height: 72rpx;
  margin-top: 20rpx;
  font-size: 28rpx;
  color: #333;
}

.diy-goods .goods-list.column__1 .goods-item_right .goods-item_title {
  line-height: 1.3;
}

.diy-goods .goods-list.column__1 .goods-item_desc {
  margin-top: 8rpx;
}

.diy-goods .goods-list.column__1 .desc-selling_point {
  width: 400rpx;
  /* height: 40rpx; */
  font-size: 24rpx;
  color: #ff495e;
}

.diy-goods .goods-list.column__1 .desc-goods_sales {
  color: #999;
  font-size: 24rpx;
}

.diy-goods .goods-list.column__1 .desc_footer {
  font-size: 24rpx;
  text-align: left;
  margin-top: 10rpx;
}

.diy-goods .goods-list.column__1 .desc_footer .price_x {
  margin-right: 16rpx;
  color: #f03c3c;
  font-size: 30rpx;
}

.diy-goods .goods-list.column__1 .desc_footer .price_y {
  text-decoration: line-through;
}


</style>
